import './index.scss'
import { Card, Form, Input, Button , message} from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useDispatch } from 'react-redux'
import { fetchLogin } from '@/store/modules/user'
import { useNavigate } from 'react-router-dom'
const Login = () => {
    const dispatch = useDispatch()
    const navigate = useNavigate()
    const onFinish = async(values) => {
        await dispatch(fetchLogin(values))
        navigate('/')
        message.success('登录成功')
    }
    return (
        <div className="login">
            <Card className='loginCard'>
                <h1 className='loginTitle'>极客园登录</h1>
                <Form validateTrigger="onBlur" onFinish={onFinish}>
                    <Form.Item
                      name="mobile"
                      rules={[
                        { required: true, message: '用户名未填写' },
                        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式' }
                    ]}
                    >
                         <Input placeholder='请输入用户名' prefix={<UserOutlined />}/>
                    </Form.Item>
                    <Form.Item
                      name="code"
                      rules={[{ required: true, message: '验证码未填写' }]}
                    >
                        <Input.Password placeholder='请输入验证码' prefix= {<LockOutlined/>}/>
                    </Form.Item>
                    <Form.Item label={null}>
                        <Button 
                            type="primary" 
                            htmlType='submit' 
                            className='loginSubmit' 
                            style={{color: '#fff'}}>
                           登录
                        </Button>
                    </Form.Item>
              </Form>
           </Card>
        </div>
    )
}
export default Login